<template>
  <div class="box">
    <h1>购物车</h1>
    <div class="header">
      <div>标题</div>
      <div>图片</div>
      <div>描述</div>
      <div>单价</div>
      <div>数量</div>
      <div>小计</div>
      <div>操作</div>
    </div>
    <div class="itembox" v-for="(item, index) in arr">
      <div>{{ item.spu.title }}</div>
      <div>
        <img :src="item.spu.img" width="100px" />
      </div>
      <div>{{ item.sku.title }}</div>

      <div>{{ item.sku.price }}</div>
      <div class="count">
        <el-button style="margin: 0" @click="orderAdd(index)"
          >+</el-button
        >
        <span style="margin:0 10px">{{ item.count }}</span>
        <el-button style="margin: 0" @click="orderSub(index)"
          >-</el-button
        >
      </div>
      <div>小计：{{ (item.sku.price * item.count).toFixed(2) }}</div>
      <div class="tip">
        <el-button style="margin: 0"
        
         @click="open(index)"
          >删除商品</el-button
        >
         <!-- @click="orderDel(index)"  -->
      </div>
    </div>
    <el-button class="submit" v-if="arr?.length > 0" @click="submit"
      >确认订单</el-button
    >
    <div>
      <Dialog :cart="arr" ref="dig" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { watch } from "vue";
import Dialog from "./Dialog.vue";
import type { Action } from 'element-plus'

let arr = ref(JSON.parse(localStorage.getItem("orderItem")));
const dig = ref(null);

const submit = () => {
  dig.value.open();
};

const orderDel = (index) => {
  arr.value.splice(index, 1);
  localStorage.setItem("orderItem", JSON.stringify(arr.value));
};
const orderAdd = (index) => {
  arr.value[index].count++;
  localStorage.setItem("orderItem", JSON.stringify(arr.value));
};
const orderSub = (index) => {
  arr.value[index].count--;
  if (arr.value[index].count == 0) {
    arr.value.splice(index, 1);
  }
  localStorage.setItem("orderItem", JSON.stringify(arr.value));
};


const open = (index) => {
  ElMessageBox.confirm(
    '确定要删除此商品吗?',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      orderDel(index)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
}

watch(
  arr,
  () => {
    arr.value?.forEach((item, index) => {
      item.spu.description.length > 15
        ? (item.spu.description = item.spu.description.substring(0, 10) + "...")
        : item.spu.description;
    });
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.box {
  width: 80%;
  margin: 10px auto;

  .header {
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #ccc;

    div {
      flex-basis: 130px;
    }
  }
}
.itembox {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  border-bottom: 1px solid #ccc;

  & > div {
    flex-basis: 130px;
  }

  .count  {
    margin: 0;
    display: flex;
    justify-content: start;

    .el-button{
      width: 30px;
    }
  }

  .tip  {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }
}
.submit {
  margin: auto;
}
</style>